<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密码管理器</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>密码管理器</h1>
        
        <div class="tabs">
            <button class="tab-btn active" data-tab="add">添加记录</button>
            <button class="tab-btn" data-tab="view">查看记录</button>
            <button class="tab-btn" data-tab="settings">设置</button>
        </div>

        <div class="tab-content" id="add-tab">
            <form id="add-form">
                <div class="form-group">
                    <label for="url">网址</label>
                    <input type="url" id="url" required>
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" required>
                </div>
                <div class="form-group">
                    <label for="notes">备注</label>
                    <textarea id="notes"></textarea>
                </div>
                <button type="submit" class="btn-primary">保存</button>
            </form>
        </div>

        <div class="tab-content hidden" id="view-tab">
            <div class="search-bar">
                <input type="text" id="search" placeholder="搜索...">
            </div>
            <div id="entries-list"></div>
        </div>

        <div class="tab-content hidden" id="settings-tab">
            <div class="form-group">
                <label for="master-key">主密钥</label>
                <input type="password" id="master-key">
            </div>
            <div class="form-group">
                <label for="sync-url">同步服务器地址</label>
                <input type="url" id="sync-url">
            </div>
            <div class="form-group">
                <label for="device-id">设备ID</label>
                <input type="text" id="device-id" placeholder="输入设备唯一标识">
            </div>
            <button id="save-settings" class="btn-primary">保存设置</button>
            <button id="sync-now" class="btn-secondary">立即同步</button>
        </div>
    </div>
    <script type="module" src="popup.js"></script>
</body>
</html> 